<template>
  <div class="app-container" style="margin: 0px;">
    <el-row :gutter="0">
      <el-col :lg="6" :md="8" :sm="24" :xs="24">
        <div class="mainbox-left">

          <el-card class="box-card" style="padding: 20px;">
            <el-row>
              <el-col align="center">
                <dt-uploadAvatar ref="dtUploadAvatarRef" @success-upload="handleCropperSuccess" />
                <!-- <el-upload
                  class="avatar-uploader"
                  :action="url"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <el-avatar v-if="avatarSrc" id="avatarImg" :size="100" :src="avatarSrc" icon="el-icon-user-solid" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload> -->
              </el-col>
            </el-row>
            <el-row>
              <el-col align="center" style="word-break:break-all;">
                <h1>{{ (realName) }}</h1>
              </el-col>
            </el-row>
            <el-row>
              <p><i class="el-icon-user" /> {{ (account) }}</p>
            </el-row>
            <el-row>
              <p><i class="el-icon-message" /> {{ (email) }}</p>
            </el-row>
            <el-row>
              <p><i class="el-icon-phone-outline" /> {{ (phone) }}</p>
            </el-row>
          </el-card>
        </div>
      </el-col>
      <el-col :lg="18" :md="16" :sm="24" :xs="24">
        <div class="mainbox-left">

          <el-card class="box-card">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="基本信息" name="basic">
                <el-form ref="form" :rules="rules" :model="formData" label-width="60px" style="max-width:660px">
                  <el-form-item label="账号" prop="account">
                    <el-input v-model="formData.account" autocomplete="off" disabled />
                  </el-form-item>
                  <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="formData.sex">
                      <el-radio label="M">男</el-radio>
                      <el-radio label="F">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" autocomplete="off" maxlength="50" class="limit" />
                  </el-form-item>
                  <el-form-item label="姓名" prop="realName">
                    <el-input v-model="formData.realName" maxlength="50" show-word-limit autocomplete="off" class="limit" />
                  </el-form-item>
                  <el-form-item label="生日" prop="birthday">
                    <el-date-picker
                      v-model="formData.birthday"
                      style="width: 100%"
                      type="date"
                      value-format="yyyy-MM-dd"
                    />
                  <!-- <el-input class="dateinput" type="date" v-model="formData.birthday" autocomplete="off"></el-input> -->
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input v-model="formData.phone" autocomplete="off" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="mini" @click="onSubmit('form')">保存更改</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="其他" name="other">
                <el-row>
                  <el-col>
                    <span>密保手机</span>
                    <p style="color: #999999">已绑定手机: {{ (phone) }}</p>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <span>密保邮箱</span>
                  <p style="color: #999999">已绑定邮箱: {{ (email) }}</p>
                </el-row>
                <el-divider />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { default as request, cloud } from '@/framework/utils/request'
import api from '@/framework/api/resource'
import { checkPhone } from '@/framework/utils/validate'

import store from '@/store'
export default {
  name: 'PersonalCenter',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号/电话'))
      } else if (!checkPhone(value)) {
        callback(new Error('请输入合法的手机号/电话'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'basic',
      formData: {},
      realName: '',
      account: '',
      email: '',
      phone: '',
      avatarSrc: '',
      url: process.env.VUE_APP_BASE_API + cloud.file + '/sysFileInfo/upload?secretFlag=N&token=' + store.getters.token,
      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        // birthday: [{ required: true, message: '请输入生日', trigger: 'blur' }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g, message: '请输入正确的邮箱', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.infoUserData()
  },
  methods: {
    infoUserData() {
      request({
        url: cloud.dqbasic + '/sysUser/currentUserInfo',
        method: 'get'
      }).then(res => {
        this.formData = res.data
        this.avatarSrc = process.env.VUE_APP_BASE_API + cloud.file + '/sysFileInfo/private/preview?fileId=' + res.data.avatar + '&token=' + store.getters.token
        this.$refs.dtUploadAvatarRef.resultImg = process.env.VUE_APP_BASE_API + cloud.file + '/sysFileInfo/private/preview?fileId=' + res.data.avatar + '&token=' + store.getters.token
        this.realName = this.formData.realName
        this.account = this.formData.account
        this.email = this.formData.email
        this.phone = this.formData.phone
        // console.info('realName=' + this.realName + '   account=' + this.account + '   ' +
        //     'email=' + this.email + '   phone=' + this.phone)
      })
    },
    handleClick(tab, event) {
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },
    submit() {
      // console.info('sub realName=' + this.realName + '   account=' + this.account + '   ' +
      //   'email=' + this.email + '   phone=' + this.phone)
      request({
        url: cloud.dqbasic + '/sysUser/updateInfo',
        method: 'post',
        data: this.formData
      }).then(res => {
        if (res.code === '00000') {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          const dom = document.getElementById('username')
          dom.innerText = this.formData.realName
          this.realName = this.formData.realName
          this.account = this.formData.account
          this.email = this.formData.email
          this.phone = this.formData.phone
          store.dispatch('user/getInfo')
        } else {
          this.$message({
            type: 'error',
            message: '修改失败'
          })
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.avatarSrc = URL.createObjectURL(file.raw)
      request({
        url: cloud.dqbasic + '/sysUser/updateAvatar',
        method: 'post',
        data: {
          'avatar': res.data.fileId
        }
      }).then(resp => {
        if (resp.code === '00000') {
          this.$message({
            type: 'success',
            message: '上传成功'
          })
          var avatarImg = document.getElementById('avatarImg')
          var _imgs = avatarImg.getElementsByTagName('img')
          var _img = _imgs[0]

          var userImg = document.getElementById('userImg')
          var _userimgs = userImg.getElementsByTagName('img')
          var _userimg = _userimgs[0]
          _userimg.src = _img.src
        } else {
          this.$message({
            type: 'error',
            message: '上传失败'
          })
        }
      })
    },
    handleCropperSuccess(file) {
      var imgFileId = file.fileId
      api.updateAvatar(imgFileId).then(res => {
        store.dispatch('user/getInfo')
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }

}
</script>

<style scoped>
.app-container > .el-row{
  display: block;
}
p{
  word-break: break-all;
}
</style>
